<template>
  <div
    class="image-block sa-flex"
    :style="{
      height: compData.style.height + 'px',
      'border-top-left-radius': compData.data.borderRadiusTop + 'px',
      'border-top-right-radius': compData.data.borderRadiusTop + 'px',
      'border-bottom-left-radius': compData.data.borderRadiusBottom + 'px',
      'border-bottom-right-radius': compData.data.borderRadiusBottom + 'px',
    }"
  >
	<div class="btnBox sa-flex">
		<div class="btn1 sa-flex-1 sa-flex-col sa-col-center sa-row-center">
			<div class="imgBox">
				<img  class="btn1-bg1" :src="checkUrl('/static/icon/hj.gif')" >
				<img  class="btn1-bg2" :src="checkUrl('/static/icon/yuanbg.gif')" >
			</div>
			<div  class="btn1-title" :style="{ color: compData.data.btn1.title.color }">
				{{ compData.data.btn1.title.text }}
			</div>
		</div>
		<div class="btnBox-right sa-flex-1 sa-flex-col  sa-row-center">
			<div class="right-btn2">
				<sa-image :url="compData.data.btn2.src" size="37" radius="0" :suffix="null"></sa-image>
				<div  class="title" :style="{ color: compData.data.btn2.title.color }">
					{{ compData.data.btn2.title.text }}
				</div>
			</div>
			<div class="right-btn3">
				<sa-image :url="compData.data.btn3.src" size="37" radius="0" :suffix="null"></sa-image>
				<div  class="title" :style="{ color: compData.data.btn3.title.color }">
					{{ compData.data.btn3.title.text }}
				</div>
			</div>
		</div>
	</div>
	<div class="tjtBox sa-m-l-5 sa-p-5">
		<div class="tjtBox-top sa-flex sa-col-bottom">
			<div class="tjt-top-title">特价团</div>
			<div class="tjt-top-subtitle">低价热抢中</div>
		</div>
		<div class="tjtBox-tg sa-flex ">
			<img class="tjtBox-tg-img" :src="checkUrl('/storage/default/20250411/0dacbbfe0f7aebae570910ab657f49d6.jpg')" alt="" />
			<div class="tginfo sa-flex-col  sa-row-between">
				<div class="tginfo-title sa-line-2">商家名字 | 这是产品名称这是产品名称</div>
				<div class="tginfo-price sa-flex sa-col-bottom">
					<div class="tginfo-price-new">￥9.11</div>
					<div class="tginfo-price-old">￥9.11</div>
				</div>
			</div>
		</div>
	</div>
  </div>
</template>

<script setup>
	import { checkUrl } from "@/sheep/utils/checkUrlSuffix"
  const props = defineProps(['compData']);
</script>

<style lang="scss" scoped>
  .image-block {
    overflow: hidden;
    .sa-image {
      height: 100%;
    }
	.btnBox{
		flex: 1;
		height: 90px;
		background: #fff;
		border-radius: 5px;

		.btn1{
			.imgBox{
				position: relative;
				width: 50px;
				height: 50px;
				.btn1-bg1{
					position: absolute;
					z-index: 1;
					top: 50%;
					left: 60%;
					transform: translate(-50%, -50%);
					width: 100px;
					height: 100px;
				}
				.btn1-bg2{
					position: absolute;
					top: 60%;
					left:48%;
					transform: translate(-50%, -50%);
					width: 50px;
					height: 50px;
				}
			}
			.btn1-title{
				margin-top: 4px;
				font-family: Source Han Sans;
				font-size: 15px;
				font-weight: 600;
				line-height: normal;
				letter-spacing: normal;
				color: #191919;
			}
		}
		.btnBox-right{
			height: 100%;
			.title{
				font-family: Source Han Sans;
				font-size: 13px;
				font-weight: normal;
				line-height: normal;
				text-align: center;
				letter-spacing: normal;
			}
			.right-btn2,
			.right-btn3{
				display: flex;
				align-items: center;

			}
		}
	}
	.tjtBox{
		flex: 1;
		height: 90px;
		background: #fff;
		border-radius: 5px;
		.tjtBox-top{
			.tjt-top-title{
				font-family: YouSheBiaoTiHei;
				font-size: 18px;
				font-weight: normal;
				line-height: 1;
				text-align: center;
				letter-spacing: normal;
				color: #2F2F2F;
			}
			.tjt-top-subtitle{
				margin-left: 6px;
				padding: 0 4px;
				height: 14px;
				border-radius: 5px;
				background: linear-gradient(271deg, #FF3636 2%, #F6ADAD 113%);
				font-family: Source Han Sans;
				font-size: 9px;
				font-weight: normal;
				line-height: 14px;
				text-align: center;
				letter-spacing: normal;
				color: #F4EDED;
			}
		}
		.tjtBox-tg{
			margin-top: 10px;
			.tjtBox-tg-img{
				width: 60px;
				min-width: 60px;
				height: 50px;
				border-radius: 4px;
			}
			.tginfo{
				margin-left: 6px;
				height: 50px;
				.tginfo-title{
					font-family: Source Han Sans;
					font-size: 13px;
					font-weight: normal;
					line-height: normal;
					letter-spacing: normal;
				}
				.tginfo-price{
					.tginfo-price-new{
						font-family: Source Han Sans;
						font-size: 12px;
						font-weight: 500;
						line-height: 1;
						letter-spacing: normal;
						color: #F6481E;
					}
					.tginfo-price-old{
						font-family: Source Han Sans;
						font-size: 9px;
						font-weight: 500;
						line-height: normal;
						letter-spacing: normal;
						text-decoration: line-through;
						color: #BFBFBF;
					}	
				}
			}
		}
	}
  }
</style>
